/*
  商品规格
*/
<template>
  <div class="goodsspecs">
    <div class="head ">
      <div class="guanDef">
        <p>商品库：<el-select v-model="value" filterable placeholder="请选择">
          <el-option v-for="item in optDef" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select></p>
        <p class='addProDef' @click="addKu()">添加商品库</p>
      </div>
      <div class="goodCon">
        <div class="goodContent">
        <el-table :data="listData" size="small" v-loading="loading" height="70vh"  style="width: 100%" element-loading-text="拼命加载中" :header-cell-style="{'color':'#3D3D3D','font-size':'20px','height':'60px','font-weight':'400','background-color':'#F8F9FB','border-bottom':'none'}" class="customer-table" :row-class-name="tableRowClassName">
        <el-table-column  prop="name" label="商品规格" main-width="16%" align="center">
        </el-table-column>
        <el-table-column prop="item" label="规格值" width="600%" align="left"></el-table-column>
        <el-table-column label="启用" main-width="16%" align="center" property="value">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.is_show" active-color="#13ce66" :active-value="1" :inactive-value="0" inactive-color="#C1C1C1"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" main-width="16%" align="center">
          <template slot-scope="scope">
            <el-button type="text" style="font-size:0.875rem;color:#436AF2" @click="handleEdits(scope.$index, scope.row)">编辑</el-button> 
            <el-button type="text" style="font-size:0.875rem;color:#436AF2" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
             <el-button type="text" style="font-size:0.875rem;color:#436AF2" @click="Administration(scope.$index, scope.row)">规格值</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog :visible.sync="addGuige" width="20%" height='530px'  style="margin-top:-5vh">
          <span class='nav'>添加商品规格</span>
          <p class="guiName1">
           <span>规格名：</span> <el-input v-model="input2" placeholder="" maxlength="5" show-word-limit></el-input>
          </p>
          <span slot="footer" class="dialog-footes">
            <el-button @click="closeDialog()" style="width:100px;height:38px;font-size:0.875rem;border-radius:5px;">取 消</el-button>
            <el-button @click="addSubmitOne()" style="width:100px;height:38px;background-color:#436AF2;color:#fff;font-size:0.875rem;border-radius:5px;">确 定</el-button>
          </span>
        </el-dialog>
        <el-dialog :visible.sync="shopBian" width="45%" height='530px' class="radios" style="margin-top:-5vh">
          <span class='nav'>修改商品规格</span>
          <p class="guiName">
           <span>规格名：</span> <el-input v-model="input1" placeholder="" maxlength="5" show-word-limit ></el-input>
          </p>
          <p class="guiNumber">
           <span>规格值：</span><span class="addSpecs" @click="addNumber()">添加规格值</span>
          </p>
      <div class="goddsSpaces">
        <el-table :data="tableData" size="small" v-loading="loading" height="35vh" 
        element-loading-text="拼命加载中" style="width:100%;" :header-cell-style="{'color':'#3D3D3D','font-size':'20px','height':'66px','font-weight':'400','background-color':'#fff','border-bottom':'none'}" class="customer-table" ref="singleTable" @current-change="handleCurrentChange">
            <el-table-column label="产品规格" width="200%" align="center">
             <template slot-scope="scope">
                <el-input type="text" values="" v-model="scope.row.item" class="colorInput" v-on:mouseleave.native="leave(scope.row)"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作" main-width="16%" align="center">
              <template slot-scope="scope">
                <el-button type="text" style="font-size:0.875rem;color:#436AF2" @click="deleteUsing(scope.$index,scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <span slot="footer" class="dialog-footer">
            <el-button @click="closeDialog()" style="width:158px;height:51px;font-size:0.875rem;border-radius:10px;">取 消</el-button>
            <el-button @click="submitForm('tableData')" style="width:158px;height:51px;background-color:#436AF2;color:#fff;font-size:0.875rem;border-radius:10px;">确 定</el-button>
          </span>
          </div>
        </el-dialog>
        <el-dialog :visible.sync="addNumShopOne" width="20%" height='530px' class="radios">
          <span class='nav'>添加规格值</span>
          <p class="guiName1">
           <span>规格名称：</span> <el-input v-model="addName" placeholder="" maxlength="5" show-word-limit></el-input>
          </p>
          <span slot="footer" class="dialog-footes">
            <el-button @click="closeDialog()" style="width:100px;height:38px;font-size:0.875rem;border-radius:5px;">取 消</el-button>
            <el-button @click="addSubmitForm(id)" style="width:100px;height:38px;background-color:#436AF2;color:#fff;font-size:0.875rem;border-radius:5px;">确 定</el-button>
          </span>
        </el-dialog>
        <el-dialog :visible.sync="strationes" width="20%" height='530px' class="radios">
          <span class='nav'>添加规格值</span>
          <p class="guiName1">
           <span>规格名称：</span> <el-input v-model="strationesName" placeholder="" maxlength="5" show-word-limit></el-input>
          </p>
          <span slot="footer" class="dialog-footes">
            <el-button @click="closeDialog()" style="width:100px;height:38px;font-size:0.875rem;border-radius:5px;">取 消</el-button>
            <el-button @click="bianSubmit(id)" style="width:100px;height:38px;background-color:#436AF2;color:#fff;font-size:0.875rem;border-radius:5px;">确 定</el-button>
          </span>
        </el-dialog>
        </div>
      </div>
      <!-- 分页 -->
      <div class="paging">
        <div class="pagiton">
          <button class="btn btn-default" type="submit" @click="prePage"><i class="el-icon-caret-left"></i></button>
          <button class="btn btn-defaults" type="submit">{{current_page}}</button>
          <button class="btn btn-default" type="submit" @click="nextPage" :class="{'disabled':disableds}"><i class="el-icon-caret-right"></i></button>
          <p class="remarks">共 <span> {{pagesize}} </span>条当前为第 <span> {{currentPage}} </span>页</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      stripe:true,
      values:'',
      optDef: [{
          value: '选项1',
          label: '默认产品库'
        }, {
          value: '选项2',
          label: '黄金会员级以上'
        }],
        value:'',
        listData: [],
        currentPage: 1, //当前页号
        pagesize:20, //每页大小
        tableData:[],
        addGuige:false,
        loading:false,
        shopBian:false,
        strationes:false,
        strationesName:'',
        input1:"",
        input2:'',
        order:'',
        type_id:'',
        image:'',
        id:'',
        addNumShop:false,
        addNumShopOne:false,
        addName:'',
        addguiName:'',
        disableds:false
    }
  },
   computed: {
    page_arrs() {
      let { currentPage, pagesize } = this;
      return this.listData.slice(
        (currentPage - 1) * pagesize,
        currentPage * pagesize
      );
    },
    current_page() {
      return this.currentPage;
    }
  },
  created(){
    this.SpecList()
  },
  methods:{
  //规格列表
    SpecList(){
      this.loading-true
      this.$axios({
        method: 'post',
        url:'goods/spec_list',
        params:{
          p:this.currentPage,
          size:this.pagesize
        }
      }).then(res=>{
        let data = res.data.data;
        if(data.length==0){
          this.disableds=true
        }else{
          this.disableds=false
          this.listData=data
        }
      })
    },
    //分页
    prePage() {
      this.disableds=false
      if (this.currentPage == 1){
        return;
      }
      this.currentPage = this.currentPage - 1;
      this.SpecList()
    },
    nextPage() {
      if (this.currentPage == Math.ceil(this.listData.length)) {
        return;
      }
      this.currentPage = this.currentPage + 1;
      this.SpecList()
    },
    addKu(){
      this.addGuige=true
      this.id='',
      this.name=''
    },
    //点击确定添加产品规格
    addSubmitOne(){
      this.$axios({
        method: 'post',
        url:'goods/save_spec',
        params:{
              name:this.input2,
            }
      }).then(res=>{
        this.SpecList()
        this.addGuige=false
        console.log(res,'点击确定添加产品规格')
      })
    },
//点击规格值
  Administration(index,row){
    this.strationes=true
    this.strationesName=''
    this.id=row.id
  },
  //规格值确定
  bianSubmit(id){
    this.$axios({
        method: 'post',
        url: 'goods/save_spec_item',
        params:{
          item:this.strationesName,
          spec_id:this.id
        }
      }).then(res=>{
        this.strationes=false
        this.SpecList()
        console.log(res,'添加规格值确定')
      })
  },
   //删除
    deleteUser(index,row){
      // console.log(row,'111111111')
       this.$confirm('确定要删除吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(() => {
          this.$axios({
            method: 'post',
            url: 'goods/del_spec',
            params:{
              id:row.id
            }
          })
          .then((res)=>{
            this.SpecList()
            if(res.status){
              this.$message({
                type:"success",
                message:"删除成功"
              })
            }
          })
        })
      .catch(err => {
        this.loading = false
        this.$message({
          type:"error",
          message:"删除失败"
        })
      })
    },
    //修改产品规格删除
    deleteUsing(index,row){
      // console.log(row,'row22222')
      this.$confirm('确定要删除吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
          this.$axios({
            method: 'post',
            url: 'goods/del_spec_item',
            params:{
              id:row.id
            }
          })
          .then((res)=>{
            this.SpecList()
            // console.log(res,"idididid")
            if(res.status){
              this.$message({
                type:"success",
                message:"删除成功"
              })
            }
          })
        }).catch(err => {
        this.loading = false
        this.$message({
          type:"error",
          message:"删除失败"
        })
      })
    },
    submitForm(){
      this.shopBian=false
      this.$axios({
         url: 'goods/save_spec',
        params:{
          id:this.id,
          name:this.input1,
          order:this.order,
          type_id:this.type_id
        }
      }).then(res=>{
        console.log(res,'编辑规格名')
        this.SpecList()
      })
    },
    //添加弹框规格值
    addNumber(){
     this.addNumShopOne=true
     this.addName=''
    },
    //添加编辑确定
    addSubmitForm(id){
      // console.log(this.id,'11111111111111')
      this.$axios({
        method: 'post',
        url: 'goods/save_spec_item',
        params:{
          item:this.addName,
          spec_id:this.id
        }
      }).then(res=>{
        this.SpecList()
        // console.log(res,'添加规格值编辑')
        this.addNumShopOne=false
      })
    },
   setCurrent(row) {
    this.$refs.singleTable.setCurrentRow(row);
   },
   handleCurrentChange(val) {
     this.currentRow = val;
   },
     //显示编辑界面--编辑产品规格列表
    handleEdits: function(index, row) {
      this.shopBian=true
      this.input1=row.name
      this.id=row.id
      this.order=row.order
      this.type_id=row.type_id
       this.$axios({
         method: 'post',
          url: 'goods/spec_item_list',
          params:{
            spec_id:this.id
          }
      }).then(res=>{
        // console.log(res,'编辑')
        this.tableData=res.data.data
      })
    },
    leave(row){
      this.$axios({
         method: 'post',
          url: 'goods/save_spec_item',
          params:{
            id:row.id,
            spec_id:this.id,
            item:row.item
          }
      }).then(res=>{
        // console.log(res,'编辑规格值')
       this.SpecList()
      })
    },
    //编辑取消
    closeDialog(){
      this.strationes=false
      this.addNumShopOne=false
      this.addGuige=false
       this.shopBian=false

    },
    //表格换色
    tableRowClassName({row, rowIndex}) {
      if (rowIndex%2=== 0) {
        return 'success-row';
      }else{
        return 'warning-row';
      }
     return '';
    }
    
  }
}
</script>
<style scoped>
/* 分页 */
.pagiton{text-align: center;
    padding-bottom: 10px;
    display: flex;
    width: 280px;
    align-items: center;
    margin: 0 auto;}
.pagiton .btn-defaults{background-color: #436AF2;border-radius: 5px;font-size:0.875rem;color:#fff;border:1px solid #436AF2;height:28px;width:28px;line-height:28px;margin:0 10px;}
.pagiton .btn-default{background-color: #fff;border:1px solid #F7F7F7;color:#C1C1C1;height:28px;width:32px;line-height:28px;font-size:0.875rem;}
.pagiton .remarks{margin:10px 0;color:#ABABAB;font-size:0.875rem;padding-left:5px;}
.disabled{
	/* 鼠标会显示不可点 */
	cursor:not-allowed;
	/* 会阻止事件 */
	pointer-events: none;  
}
/deep/ .colorInput .el-input__inner{border:none;color: #333333;font-size: 0.875rem;text-align: center;}
/deep/ .colorInput .el-input__inner:focus{border:1px dashed #DEDEDE;border-radius:0;}
/* 下拉框颜色 */
/deep/ .el-select .el-input.is-focus .el-input__inner{border:  1px solid #E7E6E6;}
/deep/ .el-select .el-input__inner:focus{border:  1px solid #E7E6E6;}
/deep/ .el-range-editor.is-active, .el-range-editor.is-active:hover{border:  1px solid #E7E6E6;}/* 下拉框颜色 */
.head{background-color: #fff;height:92vh;}
.guanDef{display: flex;justify-content: space-between;width: 96%;margin-left: 2%;font-size:14px;}
.guanDef .addProDef{width: 110px;border: 1px solid #6584F4;text-align: center;height:38px;line-height:38px;cursor: pointer;background: #436AF2;color: #fff;border-radius: 5px;}
.goodCon{width: 96%;margin-left: 2%;margin-top: 0.875rem;}
/* .goodContent {margin-bottom: 7.5rem ;} */
/deep/ .el-table .cell{font-size: 0.875rem;}
.nav{font-size: 1rem;color: #3D3D3D;font-weight: bold;line-height: 60px;}
/deep/ .guiName .el-input{width:25%;}
.guiName {display: flex;align-items: center;font-size: 0.875rem;}
.guiName span{width: 15%;display: inline-block;}
/deep/ .guiName .el-input__suffix{right:2%;}
/deep/ .guiName1 .el-input{width: 50%;}
/* 0-5 */
/deep/ .guiName1 .el-input__suffix{right:2%;}
.guiName1 {display: flex;align-items: center;font-size: 0.875rem;}
.guiName1 span{width: 20%;display: inline-block;}
/deep/ .el-dialog__body{color: #333333;font-size: 0.875rem;}
.guiNumber {display: flex;justify-content: space-between;align-items: center;}
.guiNumber .addSpecs{border: 1px solid #E7E6E6;padding: 0.5rem 3%;cursor: pointer;}
.goddsSpaces{width: 90%;margin: 0 auto}
.avatar-uploader-icon{ font-size: 28px; color: #8c939d; width: 70px; height: 60px; line-height: 60px; text-align: center; border:1px dashed #EEEEEE;}
.dialog-footer{display: inline-block;margin: 2.5rem auto;margin-left: 25%;}
.dialog-footes{display: inline-block;margin: 2.5rem auto;margin-right: 18%;}
/deep/ .el-dialog{border-radius: 10px;}
/deep/ .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{border-bottom:none;padding:10px 0;}
/deep/ .el-table .warning-row {background: #F8F9FB !important;}
/deep/ .el-table .success-row {background: white !important;}
</style>